<template>
   <div class="relatedEvents">
        <div class="particulars-r-list">
            <div class="parList-title">
                <span :class="{'event-show':titleNum === titileIndex}" @mouseenter="eventEnter(titileIndex)" 
                	@mouseleave="eventLeave(titileIndex)" v-for="(titleItem,titileIndex) in eventValue.title" 
                	:key="titileIndex" @click="eventClick(titileIndex)">{{titleItem}}</span>
                <router-link to="">MORE <i></i></router-link>
            </div>
            <div class="parList-ul">
		        <ul v-for="(ulItem,ulIndex) in eventValue.contentList" :key="ulIndex" v-if="ulIndex === titleNum">
		            <li v-for="(liItem,liIndex) in ulItem.contentAll" :key="liIndex">
		                <span>{{liItem}}</span>
		            </li>
		        </ul>
		    </div>
        </div>
   </div>
</template>

<script>
  export default {
    data () {
      return {
        titleNum: 0,
        childShow: 0,
        isClick: [false,false]
      }
    },
    props: ['eventIndex', 'eventValue'],
    methods: {
      // 移入事件
      eventEnter (index) {
        var that = this
        that.titleNum = index
        that.childShow = index
      },
      // 移除事件
      eventLeave (index) {
      	var that = this
      	if (that.isClick[0]){
      		that.titleNum = 0
            that.childShow = 0
      	} else if (that.isClick[1]) {
      		that.titleNum = 1
            that.childShow = 1
      	} else {
      		that.titleNum = 0
            that.childShow = 0
      	}
      },
      // 点击事件
      eventClick (index) {
      	var that = this
      	that.isClick = [false,false]
      	that.isClick[index] = true
      	that.titleNum = index
        that.childShow = index
      }
    }
  }
</script>

<style scoped>
	@import "../../../static/components/public/relatedEvent.css"
</style>
